<template>
  <div id="books1">
    <ul>
      <li v-for="(value,ket,index) in booksinfo" :key="index" @touchstart="gobook">
        <img width="100" height="146" :src="value.img" alt />
        <p>{{value.name}}</p>
        <p>已读{{value.rate}}%</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      booksinfo: {
        book1: {
          name: "生老疲劳",
          rate: 1.6,
          img: require("@/assets/书架/u1739.png")
        },
        book2: {
          name: "国王",
          rate: 0,
          img: require("@/assets/书架/书籍封面_u4064.png")
        },
        book3: {
          name: "月色朦胧",
          rate: 0,
          img: require("@/assets/书架/书籍封面_u4068.png")
        }
      }
    };
  },
  methods:{
    gobook(){
      
    }
  }
};
</script>

<style lang="less" scoped>
#books1 {
  margin-top: 2rem;
  height: 60rem;
  ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    li {
      p {
        &:first-of-type {
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          font-style: normal;
          font-size: 1.4rem;
          text-align: left;
          margin-top: 1rem;
          margin-bottom: .5rem;
        }
        &:last-of-type {
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          font-style: normal;
          font-size: 1.2rem;
          color: #999999;
          text-align: left;
        }
      }
    }
  }
}
</style>